<template>
  <div class="search-container">
    <!-- 搜索栏-->
    <!-- 在 van-search 外层增加 form 标签，且 action 不为空，
    即可在 iOS 输入法中显示搜索按钮。 -->
    <form action="/">
      <van-search
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch(searchText)"
        @cancel="$router.back()"
        @focus="isResultShow = false"
      />
    </form>
    <!-- /搜索栏-->

    <!-- 搜索结果-->
    <search-result
       :search-text="searchText"
       v-if="isResultShow" />
    <!-- /搜索结果-->

    <!-- 联想建议-->
    <search-suggestion
       v-else-if="searchText"
       :search-text="searchText"
       @search="onSearch"
    />
    <!-- /联想建议-->

    <!-- 历史记录-->
    <search-history
      v-else
      :search-histories="searchHistories"
      @search="onSearch"
      @update-histories="searchHistories=$event"
    />
    <!-- /历史记录-->
  </div>
</template>

<script>
  import SearchSuggestion from './components/search-suggestion'
  import SearchHistory from './components/search-history'
  import SearchResult from './components/search-result'
  import { setItem , getItem } from '@/utils/storage'
  import { mapState } from 'vuex'
  import { getSearchHistories } from '@/api/search'

  export default {
   name: 'SearchIndex',
	 components:{
     SearchSuggestion,
     SearchHistory,
     SearchResult
   },
	 props:{},
   data () {
     return {
       searchText:'', //搜索输入框的内容
       isResultShow:false ,//控制搜索结果的显示状态
       searchHistories:[], //搜索历史记录
     }
   },
	 computed: {
     ...mapState(['user'])
   },
	 watch: {
     //监视搜索历史记录的变化，存储到本地存储
     searchHistories () {
       setItem('search-histories',this.searchHistories)
     }
   },
	 created () {
     this.loadSearchHistories()
   },
	 mounted () {},
   methods:{
     onSearch (searchText) {
       //把输入框设置为你要搜索的文本
       this.searchText = searchText

       const index = this.searchHistories.indexOf(searchText)

       if(index !== -1){
         //把重复项删除
         this.searchHistories.splice(index,1)
       }

       //把最新的搜索历史记录放到顶部
       this.searchHistories.unshift(searchText)

       //如果用户已登录，则把搜索历史记录存储到线上
       //提示：只要我们调用获取搜索结果的数据接口，后端会自动存储用户的历史记录
       //如果没有登录，则把搜索历史记录存储到本地

       //因为已经监视search-histories的变化，所以不用在此进行修改
       // setItem('search-histories',this.searchHistories)

        //展示搜索结果
        this.isResultShow = true
     },

     async loadSearchHistories () {
       //后端存储的用户搜索历史记录只有四条
       //所以我们将后端返回的历史记录和本地的历史记录合并到一起
       //如果用户已登录
       const searchHistories = getItem('search-histories')
        //关闭接口获取数据
       //let searchHistories = getItem('search-histories') || []
       // if(this.user) {
       //   const { data } = await getSearchHistories()
       //   //合并数组：[...数组,...数组]
       //   //把Set转为数组：[...Set对象]
       //   //数组去重：[...new Set([...数组,...数组])]
       //   searchHistories = [...new Set([
       //     ...searchHistories,
       //     ...data.data.keywords
       //   ])]
       // }



       this.searchHistories = searchHistories
     }
   }
  }
</script>

<style scoped lang="less">
</style>
